<include file="Public/head" />
<style>
    .diy-menu{width:720px;height: 450px;margin: 20px auto;background: url(__PUBLIC__/admin/image/diy-menu-background.png) no-repeat;position: relative;}
    .diy-menu h3{text-align: center;width: 300px;font-size: 14px;font-weight: bold;padding-top: 20px;color: #4d5359;}
    .diy-menu .preview{position:absolute;left:23px;top:52px;width: 259px;height: 344px;}
    .diy-menu .col{text-align: center;bottom:0;position: absolute;width:33.333%;background-color: #ccc;}
    .diy-menu .col a{display: block;background-color: #f7f7f7;outline:none;}
    .diy-menu .c1{left:0;}
    .diy-menu .c2{left:33.33%;}
    .diy-menu .c3{left:66.66%;}
    .diy-menu .alpha{}
    .diy-menu .alpha{border:1px solid #009997 !important;margin-left: -1px;border-bottom:none !important;border-right:none !important;}
    .diy-menu .preview a{
        border:1px solid #CCC;
        border-bottom:none;
        margin-left: -1px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #666;
        position: relative;
        outline:none;
    }
    .diy-menu .c3 a{border-right:none; outline:none;}
    .diy-menu .preview a:hover{text-decoration: none;background-color: #B9D9B2;}
    .diy-menu .plus{font-size: 30px;color: #009997;line-height: 1;}
    .diy-menu .popup{position: absolute;width: 100%;height: 100%;z-index: 1;background-color: #E86460;left:0;top:0;display: block;}
    .diy-menu .popup i{width: 50%;float:left;height: 100%;line-height: 2.4;color: #FFF;display: inline-block;margin-top: -1px;}
    .diy-menu .popup i:hover{background-color: #c00;}
    .diy-menu .opt{position: absolute;left:322px;top:51px;width: 388px;height: 350px;}
    .diy-menu .opt .null{font-size: 12px;padding-top: 40%;text-align: center;color: #b0b2b4;}
    .diy-menu .btn-large{min-width:200px;position: absolute;bottom:0;right:8px;}
    .diy-menu .btn-success {
        color: #FFF;
        background-color: #8bc183;
        border-color: #72ab67;
    }
    .diy-menu .btn-success:hover, .diy-menu .btn-success:focus, .diy-menu .btn-success:active {
        color: #FFF;
        background-color: #009997;
        border-color: #009997;
    }
    .form-horizontal .form-group {
        display: block;
        min-height: 40px;
        overflow: visible;
        margin-bottom: 10px;
    }
    .form-horizontal .form-group {
        margin-left: -15px;
        margin-right: -15px;
    }
    .form-horizontal .form-group .control-label {
        color: #646464;
        font-size: 14px;
        float:left;
        margin-left:74px;
        margin-right:15px;
        line-height:34px;
    }
    .form-control {
        float:left;
        width:200px;
        height: 34px;
        padding:0 6px;
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .btn {
        display: inline-block;
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        background-color:#3497db !important;
        border: none;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>
<div class="tableContainer">
	<div class="tablePanel">
		<div class="edit-title" style="height:56px;">
			<span class="title-icon11"></span>
			<div><h4 style="float:left;margin-left:10px;">底部菜单管理<span style="font-size:12px;font-weight:normal;color:#999;">（最多创建3个一级菜单，每个一级菜单下最多可以创建5个二级菜单。菜单发布24小时后生效。您也可以重新关注公众号查看）</span></h4></div>
		</div>
		<div class="edit-body">
			<div class="diy-menu" style="margin:0;margin-top:20px;margin-left:50px;">
			    <h3>底部菜单管理</h3>
			    <div class="preview">
			        <div class='col c1' m_nu='1'>
			            <a href='javascript:;' menu_id='1' m_id='0'>+</a>
			            <volist name="first" id="vo">
			                <a class='alpha' menu_id='1' href='javascript:;' m_id=<{$vo['id']}>><{$vo.title}></a>
			            </volist>
			        </div>
			        <div class='col c2' m_nu='2'>
			            <a href='javascript:;' menu_id='2' m_id='0'>+</a>
			            <volist name="second" id="vo">
			                <a class='alpha' menu_id='2' href='javascript:;' m_id=<{$vo['id']}>><{$vo.title}></a>
			            </volist>
			        </div>
			        <div class='col c3' m_nu='3'>
			            <a href='javascript:;' menu_id='3' m_id='0'>+</a>
			            <volist name="third" id="vo">
			                <a class='alpha' menu_id='3' href='javascript:;' m_id=<{$vo['id']}>><{$vo.title}></a>
			            </volist>
			        </div>
			    </div>
			    <div class="opt">
			        <div class="null">
			            点击左侧[<span class="c-green">+</span>]号添加微信底部菜单
			        </div>
			        <div class="inner" style="display:none;">
			            <p class="c-gray fz12px" style="color:#999;margin:30px auto;">请选择订阅者点击菜单后，公众号做出相应动作</p>
			            <form class="form-horizontal user-form form-menu" id="menu_f" role="form">
			                <div class="form-group">
			                    <label class="col-sm-3 control-label">菜单名称</label>
			                    <div class="col-sm-6">
			                        <input type="text" name="title" class="form-control" maxlength="50"/>
			                    </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-3 control-label">消息类型</label>
			                    <div class="col-sm-6">
			                        <select id="uniqueSelect" name="type" class="form-control" onchange="sm_type(this.value)">
			                            <option value="view" class="m_view">链接地址</option>
			                            <option value="click" class="m_click">关键词绑定</option>
			                        </select>
			                    </div>
			                </div>
			                <div class="form-group m_key1">
			                    <label class="col-sm-3 control-label" id='unqi'>链接地址</label>
			                    <div class="col-sm-9">
			                        <input type="url" name="url" class="form-control" maxlength="255"/>
			                    </div>
			                </div>
			                <div class="set-line">
			                    <div class="col-sm-offset-3 col-sm-9">
			                        <input type="hidden" name="id" value="" />
			                        <input type="hidden" name="position" value="" />
			                        <button type='button' id="saveBtn" name="save" class="btn btn-success">保存</button>&nbsp;&nbsp;&nbsp;
			                        <button type='button' name="delete_menu" class="btn btn-success">删除</button>
			                    </div>
			                </div>
			            </form>
			        </div>
			    </div>
			    <a class="btn btn-large btn-success" href="javascript:;" name="create_menu">发布菜单</a>
			</div>
		</div>
	</div>
</div>

<script>
    $(function(){
        $(".preview").find("a").click(function(){
            $("#menu_f").find("input").val('');
            $("[name=position]").val($(this).attr("menu_id"));
            $("[name=id]").val($(this).attr("m_id"));
            if($(this).attr("m_id")==0){
                $("[name=delete_menu]").hide();
            }else{
                $("[name=delete_menu]").show();
                $.ajax({
                    type: "POST",
                    url: "<{:U('editMenu')}>",
                    data:{id:$("[name=id]").val()},
                    success:function(data){
                        if(data.status ==1){
                            $("[name=title]").val(data.info.title);
                            $("#uniqueSelect").val(data.info.type);
                            $("[name=url]").val(data.info.url);
                            (data.info.type == 'click') ? $('#unqi').html('绑定规则') : $('#unqi').html('链接地址');
                        }
                    }
                });
            }
            $(".null").hide();
            $(".inner").show();
        });

        $("[name=save]").click(function(){
            $.ajax({
                type: "POST",
                url: "<{:U('saveMenu')}>",
                data:{id:$("[name=id]").val(),type:$("#uniqueSelect").val(),title:$("[name=title]").val(),url:$("[name=url]").val(),position:$("[name=position]").val()},
                success:function(data){
                    layer.alert(data.info);
                    if(data.status ==1){
                        setTimeout("location.reload()",1200);
                    }
                }
            });
        });

        $("[name=create_menu]").click(function(){
            var layerLoad = layer.load(1,{shade: [0.1,'#fff']});
            $.ajax({
                type: "POST",
                url: "<{:U('createMenu')}>",
                success:function(data){
                    layer.close(layerLoad);
                    alert(data.info);
                }
            });
        });

        $("[name=delete_menu]").click(function(){
            if(confirm("是否确认删除")){
                $.ajax({
                    type: "POST",
                    url: "<{:U('deleteMenu')}>",
                    data:{id:$("[name=id]").val()},
                    success:function(data){
                        layer.alert(data.info);
                        if(data.status ==1){
                            setTimeout("location.reload()",1200);
                        }
                    }
                });
            }
        });
    });

    function sm_type(a){
		if(a=='view'){
			$('#unqi').html('链接地址');
		}else{
			$('#unqi').html('绑定规则');
		}
	}
</script>
<include file="Public/foot"/>